<template>
  <el-row>
    <el-row class="header" type="flex" justify="start" align="middle">
      <el-col :offset="15" :span="9">
        <div class="link"></div>
      </el-col>
    </el-row>

    <el-row class="login-container" type="flex" justify="center" align="middle">
      <el-col :span="3">
        <el-row class="app">
          <el-row class="qr">
            <el-row class="qrcode-contain" type="flex" justify="center" align="middle">
              <div class="qrcode"></div>
            </el-row>
            <el-row class="msg" type="flex" justify="center" align="middle"> 手机扫码安装 </el-row>
            <el-row class="msg" type="flex" justify="center" align="middle"> 苹果安卓APP </el-row>
          </el-row>
          <el-row type="flex" justify="center" align="middle">
            <span class="host">1388app.com</span>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="12" type="flex" justify="center" align="middle">
        <div class="year"></div>
      </el-col>
      <el-col :span="9">

        <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px">
          <h3 class="title">用户登录</h3>

          <el-alert class="tips" v-if="errorMsg.length>0" :title="errorMsg" type="error" show-icon :closable="false">
          </el-alert>

          <el-form-item prop="username">
            <span class="svg-container svg-container_login">
              <svg-icon icon-class="user" />
            </span>
            <el-input name="username" type="text" placeholder="账户" @keyup.enter.native="handleLogin" v-model="loginForm.username" autoComplete="on" clearable />
          </el-form-item>

          <el-form-item prop="password">
            <span class="svg-container">
              <svg-icon icon-class="password"></svg-icon>
            </span>
            <el-input name="password" :type="pwdType" placeholder="密码" @keyup.enter.native="handleLogin" v-model="loginForm.password"></el-input>
            <el-tooltip class="item" effect="light" content="显示/隐藏密码" placement="top">
              <span class="show-pwd" @click="showPwd">
                <i class="el-icon-view" v-if="openEye"></i>
                <svg-icon icon-class="eye" v-else/>
              </span>
            </el-tooltip>
          </el-form-item>

          <el-form-item prop="verifyCode">
            <span class="svg-container">
              <i class="el-icon-info"></i>
            </span>
            <el-input name="verifyCode" class="verify-code" type="text" placeholder="验证码" @keyup.enter.native="handleLogin" v-model="loginForm.verifyCode" clearable></el-input>
            <span class="show-code" @click="showCode">
              <img :src="validCode">
            </span>
          </el-form-item>

          <!--<el-row>-->
          <!--<van-checkbox v-model="isMobile" @change="changeIsMobile" style="margin:0 0 25px 10px;">手机浏览</van-checkbox>-->
          <!--</el-row>-->

          <el-form-item>
            <el-button type="warning" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
              登录
            </el-button>
          </el-form-item>
        </el-form>

      </el-col>

    </el-row>
  </el-row>


  <!--<div class="login-container">-->
    <!--<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px" class="card-box login-form">-->
      <!--<h3 class="title">新世纪 2018</h3>-->

      <!--<el-alert class="tips" v-if="errorMsg.length>0" :title="errorMsg" type="error" show-icon :closable="false">-->
      <!--</el-alert>-->

      <!--<el-form-item prop="username">-->
        <!--<span class="svg-container svg-container_login">-->
          <!--<svg-icon icon-class="user" />-->
        <!--</span>-->
        <!--<el-input name="username" type="text" placeholder="账户" v-model="loginForm.username" autoComplete="on" clearable />-->
      <!--</el-form-item>-->

      <!--<el-form-item prop="password">-->
        <!--<span class="svg-container">-->
          <!--<svg-icon icon-class="password"></svg-icon>-->
        <!--</span>-->
        <!--<el-input name="password" :type="pwdType" placeholder="密码" @keyup.enter.native="handleLogin" v-model="loginForm.password"></el-input>-->
        <!--<el-tooltip class="item" effect="light" content="显示/隐藏密码" placement="top">-->
          <!--<span class="show-pwd" @click="showPwd">-->
            <!--<svg-icon icon-class="eye" />-->
          <!--</span>-->
        <!--</el-tooltip>-->
      <!--</el-form-item>-->

      <!--<el-form-item prop="verifyCode">-->
        <!--<span class="svg-container">-->
          <!--<i class="el-icon-info"></i>-->
        <!--</span>-->
        <!--<el-input name="verifyCode" class="verify-code" type="text" placeholder="验证码" @keyup.enter.native="handleLogin" v-model="loginForm.verifyCode" clearable></el-input>-->
        <!--<span class="show-code" @click="showCode">-->
          <!--&lt;!&ndash;<svg-icon icon-class="eye" />&ndash;&gt;-->
           <!--<img :src="validCode">-->
        <!--</span>-->
      <!--</el-form-item>-->

      <!--<el-form-item>-->
        <!--<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">-->
          <!--登录-->
        <!--</el-button>-->
      <!--</el-form-item>-->

    <!--</el-form>-->
  <!--</div>-->
</template>

<script>
  import { mapGetters } from 'vuex'
  import { Message } from 'element-ui'
  export default {
    name: 'login',
    computed: {
      ...mapGetters([
        'ValidCode', // 验证码
      ]),
    },
    data() {
      return {
        loading: false,
        pwdType: 'password',
        openEye: false,
        errorMsg: '',
        validCode: '',
        loginForm: {
          username: '',
          password: '',
          verifyCode: '',
        },
        loginRules: {
          username: [
            {
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请输入用户名',
              transform(value) {
                return value.trim()
              },
            },
          ],
          password: [
            {
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请输入密码',
            },
            {
              min: 6,
              max: 10,
              trigger: 'change',
              message: '长度在6-10位',
            },
            {
              pattern: /^[a-zA-Z0-9]+$/,
              trigger: 'blur',
              message: '只能输入英文字符和数字',
            },
          ],
          verifyCode: [
            {
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请输入验证码',
              transform(value) {
                return value.trim()
              },
            },
          ],
        },
      }
    },
    mounted() {
      // 获取验证码
      this.showCode()
      console.log('路由有什么问题么', this.$router)
    },
    methods: {
      showPwd() {
        if (this.pwdType === 'password') {
          this.pwdType = ''
        } else {
          this.pwdType = 'password'
        }
        this.openEye = !this.openEye
      },
      showCode() {
        // 获取验证码
        this.validCode =
          process.env.BASE_API + '/sites/gen-valid-code?v=' + Date.now()
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          console.log('valid是啥', valid)
          if (valid) {
            this.loginForm.username = this.loginForm.username.trim()
            this.loginForm.verifyCode = this.loginForm.verifyCode.trim()
            this.loading = true
            this.$store
              .dispatch('Login', this.loginForm)
              .then(response => {
                this.loading = false
                this.errorMsg = ''
                if (typeof response.token === 'string') {
                  // 登录成功
                  // 验证是否需要修改密码
                  // this.$store.dispatch('NeedChangePwd').then(res => {
                  if (response.cpwd === true) {
                    Message.warning('请重新修改密码')
                    this.$router.push({ path: '/change-pwd' })
                  } else {
                    this.$router.push({ path: '/' })
                  }
                  // })
                } else {
                  // 失败
                  this.errorMsg = Object.values(response)[0].toString()
                }
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            console.log('validate fail')
            return false
          }
        })
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  $bg: white;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $light_blue: #b3d8ff;
  $dark_blue: #ecf5ff;

  .header {
    height: 100px;
    width: 100%;
    .link {
      background: url(/static/member/pc/login_sgwin.png) no-repeat 0 0;
      width: 320px;
      height: 72px;
    }
  }

  .login-container {
    // position: fixed;
    //position: absolute;
    height:475px;
    width: 100%;
    padding: 30px 0;
    background-color: $bg;
    background: url(/static/member/pc/login_bg.jpg) no-repeat 0 0;
    background-size: 100% 100%;
    .app {
      width: 130px;
      .qr {
        background-color: rgb(218, 87, 32);
        border-radius: 0.5em;
        padding: 10px;
        .qrcode-contain {
          background-color: #fff;
          padding: 4px;
          width: 106px;
          margin: 0 auto;
          .qrcode {
            background: url(/static/member/pc/qrcode.png) no-repeat 0 0;
            width: 100px;
            height: 100px;
            background-size: 100% 100%;
          }
        }
        .msg {
          padding-top: 6px;
          color: #fff;
          font-size: 15px;
          font-weight: 800;
          font-style: italic;
        }
      }
      .host {
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-style: italic;
        font-weight: 600;
        margin-top: 2px;
        letter-spacing: -0.5px;
      }
    }

    .year {
      background: url(/static/member/pc/login_2018.png) no-repeat 0 0;
      width: 611px;
      height: 369px;
      // background-size: 100% 100%;
    }


    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px white inset !important;
      -webkit-text-fill-color: black !important;
    }
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: black;
      height: 47px;
    }
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;
    }
    .tips {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
      &_login {
        font-size: 20px;
      }
    }
    .title {
      font-weight:bold;
      margin: 0px auto 20px auto;
      color:#FFF;
      text-align: left;
      font-size:24px;
    }

    .login-form {
      // position: absolute;
      // left: 0;
      // right: 0;
      border-radius: 1em;
      background-color: #fff;
      background-color: rgba(0, 0, 0, 0.3);
      width: 300px;
      padding: 35px 35px 15px 35px;
      // margin: 0px auto;
      box-shadow: 0 0 15px #ffffff;
    }
    .el-form-item {
      // border: 1px solid $light_blue;
      background-color: #fff;
      border-radius: 5px;
      color: #454545;
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
    .verify-code {
      width: 40%;
    }
    .show-code {
      position: absolute;
      right: 10px;
      width: 40%;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
      text-align: center;
    }
    .thirdparty-button {
      position: absolute;
      right: 35px;
      bottom: 28px;
    }
  }
</style>
